<template>
	<view class="modern-container">
		<!-- 动态背景 -->
		<view class="bg-animation">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
		</view>

		<!-- 主内容区 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 订单卡片 -->
			<view class="order-card">
				<view class="card-header">
					<uni-icons type="list" size="24" color="#4a6baf"></uni-icons>
					<text class="card-title">订单信息</text>
					<view class="card-divider"></view>
				</view>

				<view class="order-details">
					<!-- 取件信息 -->
					<view class="detail-item">
						<uni-icons type="link" size="20" color="#7f8c8d"></uni-icons>
						<text class="detail-label">取件码：</text>
						<text class="detail-value">{{orderData.pickupCode || '未填写'}}</text>
					</view>

					<view class="detail-item">
						<uni-icons type="location" size="20" color="#7f8c8d"></uni-icons>
						<text class="detail-label">取件点：</text>
						<text class="detail-value">{{orderData.pickupAddress || '未选择'}}</text>
					</view>

					<!-- 收件人信息 -->
					<view class="detail-item">
						<uni-icons type="person" size="20" color="#7f8c8d"></uni-icons>
						<text class="detail-label">收件人：</text>
						<text class="detail-value">{{orderData.recipient.name || '未填写'}}</text>
					</view>

					<view class="detail-item">
						<uni-icons type="phone" size="20" color="#7f8c8d"></uni-icons>
						<text class="detail-label">手机号：</text>
						<text class="detail-value">{{orderData.recipient.phone || '未填写'}}</text>
					</view>

					<view class="detail-item">
						<uni-icons type="home" size="20" color="#7f8c8d"></uni-icons>
						<text class="detail-label">收货地址：</text>
						<text class="detail-value">{{orderData.recipient.address || '未填写'}}</text>
					</view>

					<!-- 备注信息 -->
					<view class="detail-item" v-if="orderData.remarks">
						<uni-icons type="info" size="20" color="#7f8c8d"></uni-icons>
						<text class="detail-label">备注：</text>
						<text class="detail-value">{{orderData.remarks}}</text>
					</view>
				</view>
			</view>

			<!-- 验证卡片 -->
			<view class="verify-card" v-if="!isVerified">
				<view class="card-header">
					<uni-icons type="vip" size="24" color="#4a6baf"></uni-icons>
					<text class="card-title">验证得优惠</text>
					<view class="card-divider"></view>
				</view>

				<view class="verify-content">
					<text class="verify-tip">验证他人手机号可得¥0.1优惠券</text>

					<view class="input-group">
						<input class="phone-input" type="number" v-model="verifyPhone" placeholder="输入他人手机号"
							maxlength="11" @focus="focusInput" @blur="blurInput" />
						<button class="verify-btn" @click="handleVerify">
							<text v-if="!isVerifying">立即验证</text>
							<view v-else class="loading">
								<view class="dot"></view>
								<view class="dot"></view>
								<view class="dot"></view>
							</view>
						</button>
					</view>
				</view>
			</view>

			<!-- 验证成功展示 -->
			<view class="verified-info" v-if="isVerified">
				<view class="success-animation">
					<uni-icons type="checkmarkempty" size="48" color="#2ecc71"></uni-icons>
				</view>

				<view class="verified-user">
					<uni-icons type="personadd" size="24" color="#4a6baf"></uni-icons>
					<text class="user-name">{{verifiedUser.name}}</text>
					<text class="user-phone">{{verifiedUser.phone}}</text>
				</view>
			</view>

			<!-- 优惠明细 -->
			<view class="coupon-card">
				<view class="card-header">
					<uni-icons type="wallet" size="24" color="#4a6baf"></uni-icons>
					<text class="card-title">费用明细</text>
					<view class="card-divider"></view>
				</view>

				<view class="coupon-list">
					<!-- 基础价格 -->
					<view class="coupon-item">
						<uni-icons type="paperclip" size="20" color="#7f8c8d"></uni-icons>
						<text class="coupon-label">基础服务费</text>
						<text class="coupon-value">¥0.6</text>
					</view>

					<!-- 快递站补贴 -->
					<view class="coupon-item highlight">
						<uni-icons type="medal" size="20" color="#4a6baf"></uni-icons>
						<text class="coupon-label">快递站补贴</text>
						<text class="coupon-value">-¥0.2</text>
					</view>

					<!-- 新人优惠 -->
					<view class="coupon-item highlight" v-if="showNewUserDiscount">
						<uni-icons type="star" size="20" color="#f39c12"></uni-icons>
						<text class="coupon-label">新人优惠</text>
						<text class="coupon-value">-¥0.3</text>
					</view>

					<!-- 验证优惠 -->
					<view class="coupon-item highlight" v-if="showVerifyDiscount">
						<uni-icons type="gift" size="20" color="#e74c3c"></uni-icons>
						<text class="coupon-label">验证奖励</text>
						<text class="coupon-value">-¥0.1</text>
					</view>

					<!-- 总计 -->
					<view class="total-price">
						<text class="total-label">实付款</text>
						<text class="total-value">¥{{finalPrice}}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 支付按钮 -->
		<view class="pay-btn-container">
			<button class="pay-btn" @click="handlePayment" :class="{disabled: isPaying}">
				<text v-if="!isPaying">确认支付 ¥{{finalPrice}}</text>
				<view v-else class="loading">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
			</button>
		</view>

		<!-- 支付成功弹窗 -->
		<uni-popup ref="successPopup" type="center">
			<view class="success-popup">
				<view class="success-animation">
					<uni-icons type="checkmarkempty" size="60" color="#2ecc71"></uni-icons>
				</view>
				<text class="success-title">支付成功</text>
				<text class="success-desc">快递员将尽快为您取件</text>
				<button class="success-btn" @click="closePopup">完成</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData: {
					pickupCode: '',
					pickupAddress: '',
					recipient: {
						name: '',
						phone: '',
						address: ''
					},
					remarks: ''
				},
				verifyPhone: '',
				isVerified: false,
				isVerifying: false,
				isPaying: false,
				showNewUserDiscount: false,
				showVerifyDiscount: false,
				verifiedUser: {
					name: '张大山',
					phone: '138*​**​*1234'
				},
				basePrice: 0.6,
				stationDiscount: 0.2,
				newUserDiscount: 0.1,
				verifyDiscount: 0.1,
				userInfo: {} // 添加用户信息对象
			}
		},
		onLoad(options) {
			// 从本地缓存获取用户信息
			this.userInfo = uni.getStorageSync('userInfo') || {};
			console.log('用户信息:', this.userInfo);
			
			// 初始化收件人信息（使用用户信息）
			this.orderData.recipient = {
				name: this.userInfo.name || '',
				phone: this.userInfo.phone || '',
				address: this.userInfo.address || ''
			};
			
			if (options.data) {
				const data = JSON.parse(decodeURIComponent(options.data));
				this.orderData = {
					...this.orderData,
					...data,
					recipient: {
						...this.orderData.recipient,
						...data.recipient
					}
				};
			}
			
			// 检查是否显示新人优惠（根据hasOrdered字段）
			this.showNewUserDiscount = !this.userInfo.hasOrdered;
		},
		computed: {
			finalPrice() {
				let price = this.basePrice;

				// 减去快递站补贴
				price -= this.stationDiscount;

				// 应用新人优惠（前端展示用，实际优惠以后端返回为准）
				if (this.showNewUserDiscount) {
					price -= this.newUserDiscount;
				}

				// 应用验证优惠
				if (this.showVerifyDiscount) {
					price -= this.verifyDiscount;
				}

				// 确保价格不为负数
				return Math.max(price, 0).toFixed(2);
			}
		},
		methods: {
			async handleVerify() {
				if (!this.verifyPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.verifyPhone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}

				this.isVerifying = true;

				// 模拟验证请求
				await new Promise(resolve => setTimeout(resolve, 1500));

				this.isVerifying = false;
				this.isVerified = true;
				this.showVerifyDiscount = true;

				console.log('验证成功，最终价格:', this.finalPrice);

				uni.showToast({
					title: '验证成功，获得¥0.1优惠券',
					icon: 'success'
				});
			},

			async handlePayment() {
				if (this.isPaying) return;
				
				// 表单验证
				if (!this.orderData.pickupCode) {
					uni.showToast({
						title: '请填写取件码',
						icon: 'none'
					});
					return;
				}
				
				if (!this.orderData.pickupAddress) {
					uni.showToast({
						title: '请选择取件点',
						icon: 'none'
					});
					return;
				}

				this.isPaying = true;

				try {
					// 构建请求数据
					const requestData = {
						villagerId: this.userInfo.id, // 使用缓存中的用户ID
						pickupCode: this.orderData.pickupCode,
						pickupLocation: this.orderData.pickupAddress,
						itemRemarks: this.orderData.remarks,
						basePrice: this.basePrice,
						stationDiscount: this.stationDiscount,
						newUserDiscount: this.showNewUserDiscount ? this.newUserDiscount : 0,
						verifyDiscount: this.showVerifyDiscount ? this.verifyDiscount : 0
					};

					// 发送创建订单请求
					const res = await uni.request({
						url: 'http://localhost:9090/order/create',
						method: 'POST',
						data: requestData,
						header: {
							'Content-Type': 'application/json'
						}
					});

					// 处理响应
					if (res.statusCode === 200 && res.data.status === 1) {
						// 订单创建成功
						const orderInfo = res.data.data;
						console.log('订单创建成功:', orderInfo);
						
						// 更新用户状态（标记为已下单）
						this.userInfo.hasOrdered = true;
						uni.setStorageSync('userInfo', this.userInfo);
						this.showNewUserDiscount = false;
						
						// 更新前端显示的实际支付金额（以后端返回的为准）
						this.finalPrice = orderInfo.finalPrice.toFixed(2);
						
						// 打开支付成功弹窗
						this.$refs.successPopup.open();
					} else {
						// 订单创建失败
						const errorMsg = res.data.message || '订单创建失败';
						uni.showToast({
							title: errorMsg,
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '网络请求失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isPaying = false;
				}
			},

			closePopup() {
				this.$refs.successPopup.close();
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modern-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-image: radial-gradient(circle at 10% 20%, rgba(255, 15, 51, 0.52) 0, #b5b5b500 40%), radial-gradient(circle at 83% 80%, rgba(45, 179, 247, 0.57) 0, #c4595900 61%);
		overflow: hidden;
		font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
	}

	/* 动态背景 */
	.bg-animation {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 0;

		.circle {
			position: absolute;
			border-radius: 50%;
			filter: blur(60px);
			opacity: 0.3;
		}

		.circle-1 {
			width: 400px;
			height: 400px;
			top: -100px;
			right: -100px;
			background: linear-gradient(135deg, #4a6baf, #6a8ccc);
		}

		.circle-2 {
			width: 500px;
			height: 500px;
			top: -150px;
			left: -100px;
			background: linear-gradient(135deg, #b5ead7, #c7ceea);
		}
	}

	/* 主内容区 */
	.main-content {
		position: relative;
		z-index: 1;
		padding: 20px;
		height: calc(100vh - 100px);
	}

	/* 卡片通用样式 */
	.order-card,
	.verify-card,
	.coupon-card {
		background: rgb(255 255 255 / 59%);
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;

		.card-title {
			font-size: 18px;
			font-weight: 600;
			color: #2c3e50;
			margin-left: 10px;
		}

		.card-divider {
			flex: 1;
			height: 1px;
			margin-left: 15px;
			background: linear-gradient(90deg, rgba(74, 107, 175, 0.2), transparent);
		}
	}

	/* 订单详情 */
	.order-details {
		.detail-item {
			display: flex;
			align-items: center;
			margin-bottom: 18px;

			&:last-child {
				margin-bottom: 0;
			}

			.detail-label {
				font-size: 15px;
				color: #7f8c8d;
				width: 80px;
				margin-left: 10px;
			}

			.detail-value {
				font-size: 15px;
				color: #2c3e50;
				font-weight: 500;
				flex: 1;
			}
		}
	}

	/* 验证卡片 */
	.verify-card {
		.verify-content {
			.verify-tip {
				display: block;
				font-size: 14px;
				color: #e74c3c;
				margin-bottom: 15px;
				text-align: center;
				font-weight: 500;
			}

			.input-group {
				display: flex;
				align-items: center;

				.phone-input {

					height: 45px;
					padding: 0 15px;
					border: 1px solid #e0e3e7;
					border-radius: 10px;
					font-size: 15px;
					background: rgba(255, 255, 255, 0.8);
					transition: all 0.3s;

					&:focus {
						border-color: #4a6baf;
						box-shadow: 0 0 0 2px rgba(74, 107, 175, .2);
					}
				}

				.verify-btn {
					width: 100px;
					height: 45px;
					margin-left: 10px;
					background: linear-gradient(135deg, #4a6baf, #6a8ccc);
					color: white;
					font-size: 14px;
					font-weight: 500;
					border-radius: 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					border: none;
					box-shadow: 0 4px 10px rgba(74, 107, 175, 0.2);

					&:active {
						transform: scale(0.98);
					}

					.loading {
						display: flex;
						align-items: center;
						justify-content: center;

						.dot {
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background: white;
							margin: 0 4px;
							animation: bounce 1.5s infinite ease-in-out;
						}
					}
				}
			}
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-5px);
		}
	}

	/* 验证成功信息 */
	.verified-info {
		margin-bottom: 20px;
		animation: fadeIn 0.5s ease;

		.success-animation {
			display: flex;
			justify-content: center;
			margin-bottom: 15px;
		}

		.verified-user {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 12px;
			padding: 12px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

			.user-name {
				font-size: 15px;
				font-weight: 500;
				color: #2c3e50;
				margin: 0 15px 0 10px;
			}

			.user-phone {
				font-size: 15px;
				color: #7f8c8d;
			}
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 优惠明细 */
	.coupon-card {
		.coupon-list {
			.coupon-item {
				display: flex;
				align-items: center;
				padding: 12px 0;
				border-bottom: 1px dashed rgba(74, 107, 175, 0.2);

				&:last-child {
					border-bottom: none;
				}

				&.highlight {
					.coupon-label {
						color: #4a6baf;
					}

					.coupon-value {
						color: #e74c3c;
					}
				}

				.coupon-label {
					font-size: 15px;

					flex: 1;
					margin-left: 10px;
				}

				.coupon-value {
					font-size: 15px;
					color: #2c3e50;
					font-weight: 500;
				}
			}

			.total-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px 0 5px;
				margin-top: 10px;
				border-top: 1px solid rgba(74, 107, 175, 0.1);

				.total-label {
					font-size: 16px;
					color: #2c3e50;
					font-weight: 600;
				}

				.total-value {
					font-size: 18px;
					color: #e74c3c;
					font-weight: 700;
				}
			}
		}
	}

	/* 支付按钮 */
	.pay-btn-container {
		position: fixed;
		bottom: 20px;
		left: 0;
		width: 100%;
		padding: 0 20px;
		z-index: 2;

		.pay-btn {
			width: 100%;
			height: 50px;
			border-radius: 12px;
			background: linear-gradient(135deg, #4a6baf, #6a8ccc);
			color: white;
			font-size: 16px;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			box-shadow: 0 8px 20px rgba(74, 107, 175, 0.3);
			transition: all 0.3s;

			&:active {
				transform: scale(0.98);
			}

			&.disabled {
				background: #bdc3c7;
				box-shadow: none;
			}

			.loading {
				display: flex;
				align-items: center;
				justify-content: center;

				.dot {
					width: 8px;
					height: 8px;
					border-radius: 50%;
					background: white;
					margin: 0 5px;
					animation: bounce 1.5s infinite ease-in-out;

					&:nth-child(1) {
						animation-delay: 0s;
					}

					&:nth-child(2) {
						animation-delay: 0.2s;
					}

					&:nth-child(3) {
						animation-delay: 0.4s;
					}
				}
			}
		}
	}

	/* 支付成功弹窗 */
	.success-popup {
		width: 280px;
		background: white;
		border-radius: 16px;
		padding: 25px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;


		.success-animation {
			margin-bottom: 20px;
		}

		.success-title {
			font-size: 18px;
			font-weight: 600;
			color: #2c3e50;
			margin-bottom: 10px;
		}

		.success-desc {
			font-size: 14px;
			color: #7f8c8d;
			margin-bottom: 20px;
		}

		.success-btn {
			width: 100%;
			height: 45px;
			border-radius: 10px;
			background: linear-gradient(135deg, #4a6baf, #6a8ccc);
			color: white;
			font-size: 15px;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			box-shadow: 0 5px 15px rgba(74, 107, 175, 0.2);
		}
	}
</style>